<template>
  <div class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
import { getPie3D } from "./sector";
import { onMounted, ref } from "vue";
import { taskType } from "@/api/modules/home";

onMounted(() => {
  getTaskType();
});
let optionData: any[] = [];
const getTaskType = async () => {
  let {
    data: { countList, nameList }
  } = await taskType();
  optionData = nameList.map((name, index) => {
    return {
      name,
      itemStyle: {
        color: styleList.get(name)
      },
      value: countList[index]
    };
  });
  let series = getPie3D(optionData, 2.5);
  option.value.series = series;
  option.value.legend = {
    data: optionData,
    bottom: 0,
    left: "center",
    width: "100%",
    itemGap: 15,
    textStyle: {
      color: "#fff",
      fontSize: 12
    },
    formatter: name => {
      if (optionData.length) {
        const item = optionData.filter(item => item.name === name)[0];
        return `${name} ${item.value}`;
      }
    }
  };
};
let styleList = new Map<string, any>();
styleList.set("救治", "#ff6b2f");
styleList.set("转院", "#0de24e");
styleList.set("接送", "#2ba7fb");
styleList.set("110呼救", "#ffffff");
styleList.set("其它", "#f24573");

const option = ref<ECOption>({
  xAxis3D: {
    min: -1,
    max: 1
  },
  yAxis3D: {
    min: -1,
    max: 1
  },
  zAxis3D: {
    min: -1,
    max: 1
  },
  grid3D: {
    show: false, //是否显示三维笛卡尔坐标系。
    boxHeight: 30, //三维笛卡尔坐标系在三维场景中的高度
    top: "-12.5%",
    // bottom: "80%",
    // environment: "#021041", //背景
    viewControl: {
      //用于鼠标的旋转，缩放等视角控制
      alpha: 40, //角度
      distance: 250, //调整视角到主体的距离，类似调整zoom 重要
      rotateSensitivity: 1, //设置为0无法旋转
      zoomSensitivity: 0, //设置为0无法缩放
      panSensitivity: 1, //设置为0无法平移
      autoRotate: true //自动旋转
    }
  }
});
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
